<template>
    <div class="gallery">
        <!-- search -->
        <div class="search">
            <!-- <input type="text" @focus="inputFocus" @blur="inputBlur" v-model="searchInput" class="searchInput" /> -->
            <div type="text" @click="inputFocus" v-model="searchInput" class="searchInput"></div>
            <i class="search-icon" v-show="searchShow"></i>
            <span class="searchPlaceHolder" v-show="searchShow">搜索</span>
        </div>
        <mTitle :title="title"></mTitle>
        <div class="gallery-wrapper">
            <img class="no-gallery-img" src="http://www.banmago.cn/qunyiguan/images/no-gallery.png" alt="" />
        </div>
        <!-- 底部 -->
        <div class="gallery-fixed">
            <router-link to="/anime" class="gallery-fixed-item" replace>
                <i class="icon icon-item1"></i>
                <span class="desc">动漫馆</span>
            </router-link>
            <router-link to="/gallery" class="gallery-fixed-item active" replace>
                <i class="icon icon-item2"></i>
                <span class="desc">数字展馆</span>
            </router-link>
            <router-link to="/resource" class="gallery-fixed-item" replace>
                <i class="icon icon-item3"></i>
                <span class="desc">数字资源库</span>
            </router-link>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import { Dialog } from 'vant'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    export default {
        data () {
            return {
                searchInput: "",
                searchShow: true,
                title: "数字展馆"
            }
        },
        methods: {
            // 获取焦点
            inputFocus () {
                // this.searchShow = false
                Dialog.alert({
                    message: '即将上线，敬请期待！'
                }).then(() => {
                    Dialog.close()
                })
            },
            // 失去焦点
            // inputBlur () {
            //     if (this.searchInput === "") {
            //         this.searchShow = true
            //     }
            // },
        },
        components: {mTitle,Scroll,Loading}
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .gallery
        width: 100%
        height: 100%
        overflow: hidden
        position: relative
        background: #fff
        .search
            width: 100%
            height: 44px
            background: #efeff4
            padding: 0 15px
            box-sizing: border-box
            -webkit-box-sizing: border-box
            position: relative
            overflow: hidden
            .searchInput
                width: 100%
                height: 32px
                background: #fff
                margin-top: 6px
                border: none
                border-radius: 0
                padding: 0 10px
                box-sizing: border-box
                -webkit-box-sizing: border-box
            .search-icon
                position: absolute
                background: url('./search-icon.png') no-repeat
                width: 13px
                height: 13px
                background-size: 100% 100%
                top: 16px
                left: 50%
                margin-left: -15px
            .searchPlaceHolder
                font-size: 14px
                color: #979797
                position: absolute
                top: 17px
                left: 51%
        .gallery-wrapper
            position: absolute
            top: 86px
            bottom: 54px
            width: 100%
            .no-gallery-img
                width: 196px
                height: 40px
                top: 50%
                left: 50%
                margin-left: -98px
                position: absolute
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
        .gallery-fixed
            position: fixed
            bottom: 0
            height: 54px
            left: 0
            width: 100%
            background: #fff
            box-sizing: border-box
            padding: 0 15px
            display: flex
            align-items: center
            border-top: 1px solid rgba(7,17,27,.1)
            .gallery-fixed-item
                flex: 1
                overflow: hidden
                &.active
                    .icon-item1
                        background: url('./anime-icon1-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item2
                        background: url('./anime-icon2-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item3
                        background: url('./anime-icon3-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                .icon-item1
                    background: url('./anime-icon1.png') no-repeat
                    width: 21px
                    height: 21px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item2
                    background: url('./anime-icon2.png') no-repeat
                    width: 18px
                    height: 21px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item3
                    background: url('./anime-icon3.png') no-repeat
                    width: 21px
                    height: 20px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
</style>